<template>
	<view>
		<!-- <navBar isBack :backColor="backColor" :title="title" :color="color" :background="background"></navBar> -->
		<nav-bars :bgColor="background" :fontColor="backColor" :title="title"></nav-bars>
		<view class="introduce">
			<view class="top_bg">
				<view class="top_main">
					<view class="top_title">
						流程指南</view>
					<view class="top_des">带您了解「联坤智装平台」的核心工艺流程</view>
				</view>
			</view>

			<view class="module">
				<view class="PageTitle">
					<view class="iconfont">&#xe615;</view>
					<view class="text">七大模块</view>
					<view class="iconfont">&#xe615;</view>
				</view>
				<view class="Seven_module">
					<view class="Seven_view" style="'">
						<view class="Seven_item" v-for="(item,index) in iconArr" :key="index">
							<view class="Seven_one">
								<view class="Seven_two">
									<view class="Seven_three">
										<view class="Seven_four">
											{{item.num}}
										</view>
									</view>
								</view>
							</view>
							<view class="Seven_text">
								{{item.text}}
							</view>
						</view>
					</view>
				</view>
				<view class="PageTitle">
					<view class="iconfont">&#xe615;</view>
					<view class="text">38项核心工艺流程</view>
					<view class="iconfont">&#xe615;</view>
				</view>
				<view class="time_line">
					<view class='weui-cell-third'>
						<block v-for="(item,index) in axis" :key="index">
							<view class='time_line_list'>
								<view class='time_line_circle'>
									<view class="time_line_black">{{item.nva}}</view>
								</view>
								<view class="time_line_itemOne" v-if="item.main !== ''">
									<view class="black_circle"></view>
									<view class='time-cell-one'>
										{{item.main}}
									</view>
								</view>
								<view class="time_line_itemTwo" v-for="(items,index) in item.list" :key="index">
									<view class="yewllo_circle"></view>
									<view class='time-cell-two'>
										<view class="time_line_title">{{items.title}}</view>
										<view>{{items.text}}</view>
									</view>
								</view>
							</view>
						</block>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import URL from '@/config/url.js';
	import service_mall from '@/service/mall.js';
	// var postsData = equire('./timeTree.js');
	// var postsData= require(" timeTree.js ");
	// import {axis} from 'timeTree.js'
	import {
		params
	} from "./timeTree.js"


	export default {
		data() {
			return {
				backColor: '#fff',
				background: "rgba(255,255,255,0)",
				title: "工艺流程详情",
				color: 'rgba(255,255,255,0)',
				iconArr: [{
						num: 1,
						text: '安全文明施工'
					},
					{
						num: 2,
						text: '基础改造'
					},
					{
						num: 3,
						text: '水电'
					},
					{
						num: 4,
						text: '泥瓦工工程'
					},
					{
						num: 5,
						text: '木工工程'
					},
					{
						num: 6,
						text: '漆工'
					},
					{
						num: 7,
						text: '安装调试'
					},
				],
				axis: []
			};
		},

		onShow: function(res) {},
		onReady() {

		},
		computed: {},
		watch: {},
		created() {},
		mounted() {
			console.log(params);
			this.axis = params
		},
		methods: {
			onPageScroll(e) {
				// console.log(e.scrollTop)
				if (e.scrollTop > 200) {
					this.backColor = "#333"
					this.background = "rgba(255,255,255,1)"
					this.color = "#333"
				} else {
					this.backColor = "#fff"
					this.background = "rgba(255,255,255,0)"
					this.color = "rgba(255,255,255,0)"
				}
			},
		}
	};
</script>

<style lang="scss" scoped>
	@import '../../iconfont.css';

	page {
		background: #fff;
	}

	// 模块
	.introduce {
		.top_bg {
			// ../../../../static/shigongdui/team_bg.png
			height: 600rpx;
			width: 100%;
			background: url(https://cos.ryz1620.com/liankun/static/builderteam/team_bg.png);
			background-repeat: no-repeat;
			background-size: 100% 100%;
			position: absolute;
			top: 0;
			color: #D5A45A;
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;
			z-index: 1;

			.top_main {
				margin-top: -130rpx;

				.top_title {
					text-align: center;
					font-size: 56rpx;
					font-weight: 600;
					line-height: 80rpx;
					margin-bottom: 8rpx;
				}

				.top_des {
					text-align: center;
					font-size: 26rpx;
					font-weight: 400;
				}
			}
		}

		.PageTitle {
			padding: 100rpx 0 80rpx 0;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 40rpx;
			font-weight: 600;
			line-height: 56rpx;
			color: #333333;

			.iconfont {
				font-size: 10rpx;
			}

			.text {
				margin: 0rpx 24rpx;
			}
		}

		.module {
			margin-top: 440rpx;
			z-index: 2;
			background: #fff;
			position: relative;
			border-radius: 16rpx 16rpx 0rpx 0;

			.Seven_module {
				padding: 0rpx 20rpx;

				.Seven_view {
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					justify-content: center;

					.Seven_item {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						width: 25%;
						margin-bottom: 48rpx;

						.Seven_one {
							width: 112rpx;
							height: 112rpx;
							border-radius: 100%;
							border: 1rpx solid #FFEBC9;
							display: flex;
							align-items: center;
							justify-content: center;

							.Seven_two {
								width: 96rpx;
								height: 96rpx;
								border-radius: 100%;
								border: 1rpx solid #FFEBC9;
								display: flex;
								align-items: center;
								justify-content: center;

								.Seven_three {
									width: 78rpx;
									height: 78rpx;
									border-radius: 100%;
									border: 1rpx solid #FFEBC9;
									display: flex;
									align-items: center;
									justify-content: center;

									.Seven_four {
										width: 60rpx;
										height: 60rpx;
										border-radius: 100%;
										border: 1rpx solid #FFEBC9;
										display: flex;
										align-items: center;
										justify-content: center;
										background-color: #FFEBC9;
										font-size: 32rpx;
										font-weight: 600;
										color: #333333;
									}
								}
							}
						}

						.Seven_text {
							margin-top: 24rpx;
							color: #333333;
							font-weight: 400;
							font-size: 28rpx;
							text-align: center;
						}
					}
				}
			}
		}
	}

	// 时间轴
	.time_line {
		box-sizing: border-box;
		padding-bottom: 60rpx;
		margin-left: 20rpx;

		.time_line_circle {
			padding: 0 8rpx;

			.time_line_black {
				background: #FFF2DD;
				border: 2rpx solid #FDDEA8;
				border-radius: 34rpx;
				padding: 8rpx 28rpx;
				font-size: 36rpx;
				font-weight: 600;
				color: #333333;
				width: max-content;
			}
		}

		.time_line_itemOne {
			border-left: 2rpx dashed #030303;
			margin: 0 46rpx;
			display: flex;
			align-items: flex-start;
			padding-top: 24rpx;
			padding-bottom: 30rpx;
			position: relative;

			.black_circle {
				margin-left: -14rpx;
				background: #030303;
				border: 4rpx solid #FDDEA8;
				border-radius: 50%;
				width: 24rpx;
				height: 24rpx;
				position: absolute;
				left: 0;
			}

			.time-cell-one {
				padding: 16rpx 28rpx 16rpx 28rpx;
				background: #F8F8F8;
				border-radius: 16rpx;
				line-height: 44rpx;
				font-size: 24rpx;
				color: #333333;
				font-weight: 400;
				margin-left: 20rpx;
			}
		}

		.time_line_itemTwo {
			border-left: 2rpx dashed #030303;
			margin: 0 46rpx;
			display: flex;
			align-items: flex-start;
			padding: 30rpx 0;
			position: relative;

			.yewllo_circle {
				margin-left: -10rpx;
				background: #FDDEA8;
				border: 4rpx solid #FDDEA8;
				border-radius: 50%;
				width: 16rpx !important;
				height: 16rpx !important;
				position: absolute;
				left: 0;
			}

			.time-cell-two {
				padding: 16rpx 28rpx 16rpx 28rpx;
				background: #F8F8F8;
				border-radius: 16rpx;
				line-height: 44rpx;
				font-size: 24rpx;
				color: #333333;
				font-weight: 400;
				margin-left: 24rpx;

				.time_line_title {
					font-size: 28rpx;
					font-weight: 600;
					color: #333333;
					margin-bottom: 16rpx;
				}
			}
		}
	}
</style>
